<template>
  <!-- <h1>{{ obj.msg }}==={{ obj.school }}</h1> -->
  <h1>{{ msg }}==={{ school }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <button @click="sendData">给父组件传递数据</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

<script setup>
import { ref } from "vue"
// 在setup这种语法糖的使用方式下面,使用的响应式数据或者是函数可以直接使用
let count = ref(0)
// 接收父组件传递过来的数据
// 由于defineProps使用频率非常高，可以不用引入而直接来使用
// const obj = defineProps(["msg", "school"])
const { msg, school } = defineProps(["msg", "school"])
// 接受父组件的数据,结构变成响应式

// 注意使用了setup语法糖格式

console.log(msg, school)
// 接收父组件传递过来的自定义事件，然后统一进行管理，使用emits来进行协调调用
const emits = defineEmits(["getData", "xxx", "aaa"])
const sendData = () => {
  emits("getData", 6669)
}
</script>
